<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        p{
            font-size: 20px;
        }
        /* p>span{
            font-size: 50px;
        } */
        p::first-letter{
            font-size: 50px;
        }
        p::first-line{
            background-color:yellow;
        }
        p::selection{
            background-color:greenyellow;
        }
        div::before{
            content:"【";
            color:violet;
            font-size: 20px;
        }
        div::after{
            content: "】";
            color: brown;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <q>hello</q>
    <div>
        Hello How Are You
    </div>
    <p>Lipsum dolor sit amet consectetur adipisicing elit. Atque velit modi veniam nisi veritatis tempore laborum nemo ipsa itaque optio. Id odit consequatur mollitia excepturi, minus saepe nostrum vel porro.</p>
</body>
</html>